<script setup lang="ts">
defineProps(['menu'])
</script>
<template>
	<div class="menu">
		<div class="ment-item" v-for="item in menu" :key="item.name" @click="item.click()">
			<img :src="item.icon" alt="">
			<span>{{ item.name }}</span>
		</div>
	</div>
</template>
<style scoped lang="less">
.menu {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(4, 25%);
	grid-template-rows: repeat(6, 110px);

	// background-image: 
	// 	linear-gradient(to right, #e0e0e0 1px, transparent 1px),
	// 	linear-gradient(to bottom, #e0e0e0 1px, transparent 1px);
	// background-size: 15px 15px;
	// background-color: #fff;
	.ment-item {
		align-content: center;
		font-size: 13px;
		font-weight: 500;
		text-align: center;

		img {
			width: 50px;
			height: 50px;
		}

		span {
			display: block;
		}
	}
}
</style>
